{% extends "raw.html.j2" %}
{% block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/ui/pkg/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/pkg/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/pkg/fontawesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/web/ip/ipam/css/vrf_index.css" />
<script TYPE="text/javascript" SRC="/ui/pkg/jquery/jquery.min.js"></script>
<script TYPE="text/javascript" SRC="/ui/pkg/bootstrap/js/bootstrap.min.js"></script>
<div class="container-fluid">
{% endblock %}
{% block content %}
<div class="row">
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
      <li class="breadcrumb-item">IPAM</li>
      <li class="breadcrumb-item"><a href="/ip/ipam/">VRF</a></li>
      <li class="breadcrumb-item"><a href="/ip/ipam/">{{vrf.name}} ({{ vrf.vpn_id }})</a></li>
      <li class="breadcrumb-item"><a href="/ip/ipam/">IPv{{prefix.afi}}</a></li>
     {% for p in path %}
         <li class="breadcrumb-item>"><a href="#" onclick="app.showPrefix({{ p.vrf.id }}, '{{ p.afi }}', '{{ p.prefix }}')" title="{{p.short_description}}">{{p.prefix}}</a></li>
     {% endfor %}
     <li class="breadcrumb-item active">{{prefix.prefix}}</li>
  </ol>
</nav>
</div>
<div class="row">
    <div style="display: flex;width: 100%;">
<!-- toolbar -->
{% if can_change %}
    <div style="display: flex;justify-content: flex-start;width: 50%;padding: 10px;">
    {% if can_ping %}
        <button type="button"
                class="btn btn-primary"
                id="pingtest"
                onclick="toggle_pingtest()">Start Ping</button>
    {%endif%}
    {% if can_add_prefix %}
        <button type="button"
                class="btn btn-primary"
                onclick="app.onAddPrefix({{ prefix.id }})"><i class="fa fa-plus"></i> Add Prefix</button>
    {% endif %}
    {% if can_add_address %}
        <button type="button"
                class="btn btn-primary"
                onclick="app.onAddAddress({{ prefix.id }})"><i class="fa fa-plus"></i> Add Address</button>
    {% endif %}
    <button type="button"
            class="btn btn-primary"
            onclick="app.onChangePrefix({{ prefix.id }})"><i class="fa fa-edit"></i> Change</button>
    {% if user.is_superuser %}
        <button type="button"
                class="btn btn-secondary"
                onclick="document.location = '/ip/tools/{{ prefix.vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/'"><i class="fa fa-wrench"></i> Tools</button>
    {% endif %}
    {% if prefix.parent %}
    <button type="button"
            class="btn btn-danger"
            onclick="app.onDeletePrefix({{ prefix.id }})"><i class="fa fa-times"></i> Delete</button>
    {% endif %}
    </div>
{% endif %}
    <div style="display: flex;justify-content: flex-end;width: 50%;padding: 10px;">
    <form method="POST" id="quickjump-form" action="/ip/ipam/{{ vrf.id }}/{{ prefix.afi }}/quickjump/">
        <input type="search"
               name="jump"
               autofocus
               class="form-control position-static"
               placeholder="Quick Jump..." />
    </form>

    <div class="dropdown" style="display: inline-block">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Favorites
      <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        {% for p in bookmarks %}
            <li><a class="dropdown-item" href="../../../../{{p.vrf.id}}/{{p.afi}}/{{p.prefix}}/">{{p.prefix}} {{p.short_description}}</a></li>
        {% endfor %}
      </ul>
    </div>
    </div>
    </div>
<!-- end toolbar -->
</div>
{% if styles %}
<!-- custom styles -->
<style>
    {{styles|safe}}
</style>
<!-- end custom styles -->
{% endif %}
<script type="text/javascript">
// Set current context
document.currentVRF = {{ prefix.vrf.id }};
document.currentAFI = {{ prefix.afi }};
document.currentPrefix = "{{ prefix.prefix }}";
</script>
<!-- long description -->
{% if prefix.description %}
    <div class="row" style="padding: 0 10px 0 10px;">
        <div class="description">
            <pre>{{prefix.description}}</pre>
        </div>
    </div>
{% endif %}
<!-- end long description -->
<!-- empty block message -->
{% if display_empty_message %}
    <div class="row">
        <p><b>WARNING!!!</b><br/><i>This prefix is empty! Please add nested prefixes or addresses.</i></p>
    </div>
{% endif %}
<!-- end of empty block message -->
<!-- prefixes -->
<div class="row">
        <div class="col-sm-12 col-lg-9">
{% if prefixes %}
    <script type="text/javascript">
    p_free_shown=false;
    function toggle_free_prefixes() {
        if(p_free_shown) {
            $(".free-prefix").hide();
            $("#show-free-prefixes").show();
            $("#hide-free-prefixes").hide();
            p_free_shown=false;
        } else {
            $(".free-prefix").show();
            $("#show-free-prefixes").hide();
            $("#hide-free-prefixes").show();
            p_free_shown=true;
        }
        return false;
    }
    </script>
    <table class="table table-striped">
        <caption class="module">Allocated Prefixes
             <button type="button"
                     id="show-free-prefixes"
                     style="float: right"
                     class="btn btn-info btn-sm"
                     onclick="toggle_free_prefixes()"><i class="fa fa-eye"></i> Show Free</button>
             <button type="button"
                     id="hide-free-prefixes"
                     style="float: right;display:none"
                     class="btn btn-info btn-sm"
                     onclick="toggle_free_prefixes()"><i class="fa fa-eye-slash"></i> Hide Free</button>
        </caption>
        <thead>
            <tr>
                <th class="fav">&nbsp;</th>
                <th class="ip">Prefix</th>
                <th class="status">State</th>
                <th class="project">Project</th>
                <th class="as">AS</th>
                <th class="vc">VC</th>
                <th class="description">Description</th>
                <th class="usage">Usage</th>
                <th class="usage">Address Usage</th>
                <th class="tt">TT</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tr style="display:none" id="at-p-start"></tr>
        {% for f, pp, p, is_bookmarked  in l_prefixes %}
            {% if f %}
                <tr {% if p.profile and p.profile.style %}class="{{p.profile.style.css_class_name}}"{% endif %}>
                    <td>
                        <a href="/ip/ipam/{{ p.vrf.id }}/{{ p.afi }}/{{ p.prefix }}/toggle_bookmark/"><i class="fa fa-2x fa-star {% if is_bookmarked %}favorite-active{% else %}favorite-inactive{% endif %}" title="Toggle Bookmark"></i></a>
                    </td>
                    <td><a href="#" onclick="app.showPrefix({{ p.vrf.id }}, '{{ p.afi }}', '{{ p.prefix }}')" title="{{ p.description }}">{{p.prefix}}</a></td>
                    <td title="{{ p.state.description|safe }}">{{ p.state.name }}</td>
                    <td>{% if p.project %}{{ p.project.code }}{% endif %}</td>
                    <td>{% if p.asn %}AS{{p.asn.asn}}{% endif %}</td>
                    <td>{% if p.vc %}{{p.vc}}{% endif %}</td>
                    <td title="{{p.description}}">{{p.short_description}}</td>
                    <td>
                        <div class="progress" title="{{ p.usage_percent }}">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ p.usage_percent }}"
                                 aria-valuenow="{{ p.usage_percent }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100"
                                 title="{{ p.usage_percent }}"
                            ><span>{{p.usage_percent}}</span></div>
                        </div>
                    </td>
                    <td>
                        <div class="progress" title="{{ p.address_usage_percent }}">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ p.address_usage_percent }}"
                                 aria-valuenow="{{ p.address_usage_percent }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100"
                                 title="{{ p.address_usage_percent }}"
                            ><span>{{p.address_usage_percent}}</span></div>
                        </div>
                    </td>
                    <td>{% if p.tt %}{{p.tt}}{% endif %}</td>
                    <td>{% if p.tags %}{% for tag in p.tags %}<span class="badge badge-secondary">{{ tag }}</span>{% endfor %}{% endif %}</td>
                </tr>
            {% else %}
                <tr class='free-prefix' style='display:none'>
                    <td></td>
                    <td>
                        {{ pp }}
                    </td>
                    <td colspan="7">
                        {% if can_add_prefix %}
                            <button type="button"
                                class="btn btn-primary"
                                onclick="app.onAddPrefix({{ prefix.id }}, '{{ pp.prefix }}')">Add Prefix</button>
                        {% endif %}
                    </td>
                </tr>
            {% endif %}
        {% endfor %}
    </table>
{% endif %}
<!-- end prefixes -->
<!-- addresses -->
{% if addresses %}
    <style>
    .noc-r-none {
        background-color: #ffffff;
    }

    .noc-ri-none {
        border-left-width: 5px;
        border-left-style: none;
        width: 0px;
        padding: 0px;
    }
    {% for r in ranges %}
        .noc-r-{{r.id}} {
            background-color: {{r.color}};
        }

        .noc-ri-{{r.id}} {
            border-left-width: 5px;
            border-left-style: solid;
            border-left-color: {{r.color}};
            width: 0px;
            padding: 0px;
        }
    {% endfor %}
    </style>
    {% if spot %}
        <script type="text/javascript">
            SPOT={{spot|safe}};
            spotted=false;
            free_shown=false;

            function install_spotted() {
                var i;
                if(spotted)
                    return;

                var addresses=$.map($("#addresses .used-address"),function(v) {return v;});
                var $ce=addresses.shift();
                var ca=$(".address a",$ce).html(); /* Current address */
                var $cp=$("#at-start"); /* Current insertion point */
                var canEditSpec={% if can_edit_special %}true{% else %}false{% endif %}
                /* Walk through all spotted addresses */
                $.each(SPOT,function(index,spot){
                    var value=spot[0];
                    var slots=spot[1];
                    var isSpecial=spot[2];
                    if(value==ca) {
                        /* Get next address */
                        $cp=$($ce);
                        $ce=addresses.shift();
                        ca=$(".address a",$ce).html();
                    } else {
                        /* Calculate range slots */
                        var s="";
                        for(i=0;i<slots.length;i++) {
                            var v=slots[i];
                            if(v==null) {
                                v = "none";
                            }
                            s+="<td class='noc-ri-"+v+"'></td"
                        }
                        /* Insert row */
                        var $v;
                        if(value && !isSpecial || ( value && isSpecial && canEditSpec)) {
                            $v = $(
                                "<tr class='free-address' style='display:none'>" +
                                s +
                                "<td><img id='s_" + value +
                                "' class='s_img' src='/ui/web/img/blank_1x1.png'/></td>" +
                                "<td><a href='#' onclick='app.onAddAddress({{ prefix.id }}, \"" +
                                value + "\")' title='Click to add new address'>" +
                                value + "</a>" +
                                "</td><td colspan='7'>" +
                                "<button type=\"button\" " +
                                "class=\"btn btn-primary\" " +
                                "onclick=\"app.onAddAddress({{ prefix.id }}, '" + value + "')\">" +
                                "Add Address" +
                                "</button>" +
                                "</td>" +
                                "</tr>"
                            )
                        } else if(value && isSpecial && !canEditSpec) {
                            $v = $(
                                "<tr class='special-address' style='display:none'>" +
                                s +
                                "<td><img id='s_" + value +
                                "' class='s_img' src='/ui/web/img/blank_1x1.png'/></td>" +
                                "<td>" +
                                value +
                                "</td><td colspan='7'>" +
                                "</td>" +
                                "</tr>"
                            )
                        } else {
                            $v = $(
                                "<tr class='free-address-sep' style='display:none'>" +
                                s +
                                "<td></td><td colspan='8'>...</td></tr>"
                            )
                        }
                        $v.insertAfter($cp);
                        $cp=$v;
                    }
                });
                spotted=true;
            }

            function toggle_free() {
                install_spotted();
                if(free_shown) {
                    $(".free-address").hide();
                    $(".free-address-sep").hide();
                    $(".special-address").hide();
                    $("#toggle-free-link").text("Show free addresses");
                    free_shown=false;
                } else {
                    $(".free-address").show();
                    $(".free-address-sep").show();
                    $(".special-address").show();
                    $("#toggle-free-link").text("Hide free addresses");
                    free_shown=true;
                }
                return false;
            }

            var _in_pingtest=false;
            var _ping_task_id=0;

            function toggle_pingtest() {
                if(_in_pingtest) {
                    $("#pingtest").text("Start Ping");
                } else {
                    $("#pingtest").text("Stop Ping");
                }
                _in_pingtest=!_in_pingtest;
                if(_in_pingtest) {
                    install_spotted();
                    //run_pingtest();
                }
            }

            function display_ping_result(result) {
                var src;
                var ip;
                $(".s_img").each(function(i){
                    ip=$(this).attr("id").substring(2);
                    if ((ip in result) && result[ip])
                        src="/ui/pkg/django-media/admin/img/icon-yes.gif";
                    else
                        src="/ui/pkg/django-media/admin/img/icon-no.gif";
                    $(this).attr("src",src);
                })
            }

            function check_ping_task() {
                if(!_in_pingtest)
                    return;
                $.get("/ip/ipam/{{ vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/ping_check/"+_ping_task_id+"/",function(data,status,request) {
                    if(data==null) {
                        if(_in_pingtest)
                            setTimeout(check_ping_task,5000);
                    } else {
                        _ping_task_id=0;
                        display_ping_result(data);
                        if(_in_pingtest)
                            setTimeout(run_pingtest,60000);
                    }
                });
            }

            function run_pingtest() {
                $.get("/ip/ipam/{{ vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/ping_check/",function(data,status,request){
                    _ping_task_id=data;
                    $.get("/ip/ipam/{{ vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/ping_check/"+_ping_task_id+"/",check_ping_task);
                });
            }
        </script>
    {% endif %}
    <table id="addresses" class="table table-striped">
        <caption class="module">
            Assigned Addresses
            {% if spot %}
                <button type="button"
                     id="toggle-free-link"
                     style="float: right"
                     class="btn btn-info btn-sm"
                     onclick="toggle_free()">Show free addresses</button>
            {% endif %}
        </caption>
        <thead>
            <tr>
                {% if max_slots %}<th colspan="{{max_slots}}" style="width: 0px"></th>{%endif%}
                <th class="status">Up</th>
                <th class="ip">Address</th>
                <th class="fqdn">Name</th>
                <th class="state">State</th>
                <th class="project">Project</th>
                <th class="fqdn" style="width: auto">FQDN</th>
                <th class="mac">MAC</th>
                <th class="managed-object">Managed Object</th>
                <th class="gw" title="Address belongs to router interface">GW</th>
                <th>Description</th>
                <th>Source</th>
                <th class="tt">TT</th>
                <th>Tags</th>
            </tr>
        </thead>
        <tbody>
            <tr style="display:none" id="at-start"></tr>
            {% for a in addresses %}
                <tr class="used-address {% if a.profile.style %}{{a.profile.style.css_class_name}}{% endif %}">
                    {% if max_slots %}
                        {% for r in a.slots %}
                            <td class="noc-ri-{% if r %}{{r.id}}{% else %}none{% endif %}"></td>
                        {% endfor %}
                    {% endif %}
                    <td><img id="s_{{a.address}}" class="s_img" src="/ui/web/img/blank_1x1.png"/></td>
                    <td class="address">
                        {% if can_change %}
                            <a href="#" onclick="app.onChangeAddress({{ a.id }})">{{a.address}}</a>
                        {%else%}
                            {{a.address}}
                        {%endif%}
                    </td>
                    <td>{{ a.name }}</td>
                    <td class="state" title="{{ a.state.description|safe }}">{{ a.state.name }}</td>
                    <td class="state">{% if a.project %}{{ a.project.code }}{% endif %}</td>
                    <td style="width: auto">{% if a.fqdn %}{{a.fqdn}}{% endif %}</td>
                    <td>{% if a.mac %}{{a.mac}}{% endif %}</td>
                    <td>{% if a.managed_object %}<a href="/api/card/view/managedobject/{{ a.managed_object.id }}/" target="_">{{a.managed_object.name}}</a>{% if a.subinterface %}@{{ a.subinterface }}{% endif %}{% endif %}</td>
                    <td>{% if a.managed_object and a.managed_object.is_router %}<i class='noc-yes fa fa-check'></i>{% endif %}</td>
                    <td title="{{a.description}}">{{a.short_description}}</td>
                    <td>
                        {{ {"M": "Manual", "I": "Interface", "m": "Mgmt", "d": "DHCP", "n": "Neighbor"}.get(a.source, "-")}}
                    </td>
                    <td>{%if a.tt %}#{{a.tt}}{%endif%}</td>
                    <td>{% if a.tags %}{% for tag in a.tags %}<span class="badge badge-secondary">{{ tag }}</span>{% endfor %}{% endif %}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Ranges -->
    {% if  ranges %}
        <div class="module">
            <table width="100%" id="ranges" class="striped">
                <caption class="module">Address Ranges</caption>
                <thead>
                    <tr>
                        <th class="legend"></th>
                        <th class="name">Name</th>
                        <th class="address">From Address</th>
                        <th class="address">To Address</th>
                        <th>Description</th>
                    </tr>
                </thead>
                {% for r in ranges %}
                    <tr>
                        <td class="noc-r-{{r.id}}"></td>
                        <td>{{r.name}}</td>
                        <td>{{r.from_address}}</td>
                        <td>{{r.to_address}}</td>
                        <td>{{r.short_description}}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    {% endif %}
    <!-- End ranges -->
{% endif %}
<!-- end addresses -->
<!-- block info -->
        </div>
    <div class="col-sm-12 col-lg-3">
<div class="module">
    <table class="table table-striped">
        <caption class="module">
            {% if has_bookmark %}
                <a href="/ip/ipam/{{ prefix.vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/toggle_bookmark/"><i class="fa fa-star favorite-active" title="Remove Bookmark"></i></a>
            {% else %}
                <a href="/ip/ipam/{{ prefix.vrf.id }}/{{ prefix.afi }}/{{ prefix.prefix }}/toggle_bookmark/"><i class="fa fa-star favorite-inactive" title="Add Bookmark"></i></a>
            {% endif %}
            {{prefix.prefix}} Info</caption>
        <tbody>
        <!-- State -->
        <tr>
            <td><b>Profile</b></td>
            <td>{{ prefix.profile.name }}</td>
        </tr>
        <!-- State -->
        <tr>
            <td><b>State</b></td>
            <td>{{ prefix.state.name }}</td>
        </tr>
        {%  if prefix.afi == "4" and prefix.ipv6_transition %}
            <tr>
                <td><b>Dual-stack allocation</b></td>
                <td><a href="#" onclick="app.showPrefix({{ prefix.vrf.id }}, '6', '{{ prefix.ipv6_transition.prefix }}')">{{ prefix.ipv6_transition.prefix }}</a></td>
            </tr>
        {%  endif %}
        {%  if prefix.afi == "6" and prefix.has_transition and prefix.ipv4_transition %}
            <tr>
                <td><b>Dual-stack allocation</b></td>
                <td><a href="#" onclick="app.showPrefix(prefix.vrf.id, '4', '{{ prefix.ipv4_transition.prefix }}')">{{ prefix.ipv4_transition.prefix }}</a></td>
            </tr>
        {%  endif %}
        {% if prefix.tags %}
            <tr><td><b>Tags</b></td><td>{% if prefix.tags %}{% for tag in prefix.tags %}<span class="badge badge-secondary">{{ tag }}</span>{% endfor %}{% endif %}</td></tr>
        {% endif %}
        <!-- ASN -->
        {% if prefix.asn %}
            <tr><td><b>AS</b></td><td>AS{{ prefix.asn.asn }} ({{ prefix.asn.as_name }})</td></tr>
        {% endif %}
        <!-- VC -->
        {% if prefix.vc %}
            <tr>
                <td><b>VC</b></td><td>{{prefix.vc}}</td>
            </tr>
        {% endif %}
        <!-- End VC -->
        <! -- Project -->
        {% if prefix.project %}
            <tr>
                <td><b>Project</b></td><td>{{prefix.project}}</td>
            </tr>
        {% endif %}
        <!-- End Project -->
        <tr>
            <td><b>Maintainers</b></td>
            <td>{{ prefix.maintainers|join(", ") }} {# {%if can_change_maintainers %}<a href="url ip:prefixaccess:add?vrf={{vrf.id}}&afi={{prefix.afi}}&prefix={{prefix.prefix}}" class="changelink">Change...</a>{%endif%} #}</td>
        </tr>
        {% for k,v in prefix_info %}
            <tr>
                <td style="width: 10pt"><b>{{k}}</b></td>
                <td>{{v}}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
    </div>
<!-- container -->
</div>
{% endblock %}
</div>